<!DOCTYPE HTML>
<HTML>

<TITLE>project</TITLE>
<meta charset="UTF-8">
<style>
</style>
<script src="/js/vue.js"></script>
<script src="/js/vue-router.js"></script>
<link rel="stylesheet" href="/css/el/index.css">
<script src="/js/el/index.js"></script>
<script type="text/javascript" src="/js/axios/index.js"></script>
<script type="text/javascript" src="/api/ajax.js"></script>
</HEAD>

<BODY>

<div id="app" class="container">
  <el-form inline :model="queryParam" class="demo-form-inline">
    <el-form-item label="关键词">
      <el-input v-model="queryParam.title"></el-input>
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="list" highlight-current-row @current-change="query" empty-text="暂无数据" style="width: 100%">
    <el-table-column property="id" label="id" width="150"></el-table-column>
    <el-table-column property="title" label="title" width="300"></el-table-column>
    <el-table-column property="zipName" label="zipName" width="300">
      <template slot-scope="{ row }">
        <el-editable
                v-model="row.zipName"
                @edit="handleEdit(row)"
                :disabled="false"
                :submit-on-enter="false">
          <template slot="reference">
            <span v-text="row.zipName"></span>
          </template>
        </el-editable>
      </template>
    </el-table-column>
    <el-table-column property="url" label="url" width="500"></el-table-column>
    <el-table-column property="description" label="description"></el-table-column>
  </el-table>
  </el-pagination>
  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                 :current-page="queryParam.pageNum"
                 :page-sizes="[15, 20, 30, 40]"
                 :page-size="queryParam.pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total">
  </el-pagination>
</div>
</BODY>

</HTML>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        queryParam:{
          id:null,
          title:null,
          url:null,
          pageNum:1,
          pageSize:15
        },
        editRowId:null;
        total:0,
        list: [],
      }
    },
    methods: {
      handleSizeChange(pageSize){
        this.queryParam.pageSize = pageSize;
        this.query();
      },

      handleCurrentChange(pageNum){
        this.queryParam.pageNum = pageNum;
        this.query();
      },
      query() {
        console.log(this.queryParam)
        axios.post('/gitProject/projectList', this.queryParam).then(res => {
          if(res.data.success){
            this.total = res.data.data.total
            this.list = res.data.data.list
          }else {
            this.$message.error(res.data.msg)
          }
        }).finally(() => {
          this.generateLoading = false;
        })
      },
      handleEdit(row){
        console.log(row)
      },
      startEditing(row) {
        this.editRowId = row.id;
      },

    },
  })
</script>